import 'package:flutter/material.dart';
import 'package:wallpaper/components/my_tab_header.dart';
import 'package:wallpaper/generated/l10n.dart';
import 'package:wallpaper/pages/navbar/child/video_list_page.dart';
import 'package:wallpaper/pages/navbar/child/video_search.dart';
import 'package:wallpaper/tools/route_animation.dart';

class VideoPage extends StatefulWidget {
  const VideoPage({super.key});

  @override
  State<VideoPage> createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> with TickerProviderStateMixin {
  late TabController tabController;
  PageController pageController = PageController();
  String type = 'mobile';
  @override
  void initState() {
    super.initState();
    tabController = TabController(
      length: 2,
      vsync: this,
    );
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).colorScheme;
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        elevation: 0,
        backgroundColor: theme.primaryContainer,
        surfaceTintColor: theme.primaryContainer,
        title: _buildHeader(context,theme),
        actions: [
          IconButton(
              onPressed: () {
                RouteAnimation().animateRoute(
                  context,
                  VideoSearch(
                    type: type,
                  ),
                );
              },
              icon: Icon(Icons.search)),
        ],
      ),
      body: Column(
        children: [
          Expanded(
              child: PageView(
            controller: pageController,
            onPageChanged: (index) {
              index == 0 ? type = 'mobile' : type = 'pc';
              tabController.animateTo(index,
                  duration: Duration(milliseconds: 300),
                  curve: Curves.easeInOut);
            },
            children: [
              VideoListPage(type: 'mobile'),
              VideoListPage(type: 'pc'),
            ],
          ))
        ],
      ),
    );
  }

  Widget _buildHeader(BuildContext context, ColorScheme theme) => Container(
        height: 40,
        padding: EdgeInsets.only(left: 16, right: 16),
        color: theme.primaryContainer,
        child: MyTabHeader(
          tabController: tabController,
          tabs: [S.of(context).portrait, S.of(context).landscape],
          onTap: (index) {
            pageController.jumpToPage(index);
            index == 0 ? type = 'mobile' : type = 'pc';
          },
        ),
      );
}
